<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Item Sliding - Basic</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>

  <body>
    <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-title>Item Sliding - Basic</ion-title>
          <ion-buttons slot="secondary">
            <ion-button onclick="changeDynamicText()">Dynamic</ion-button>
          </ion-buttons>
          <ion-buttons slot="primary">
            <ion-button onclick="reload()">Reload</ion-button>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>

      <ion-content>
        <ion-refresher id="refresher">
          <ion-refresher-content
            pulling-text="Pull to refresh..."
            refreshing-spinner="bubbles"
            refreshing-text="Refreshing..."
          >
          </ion-refresher-content>
        </ion-refresher>

        <div class="ion-padding">
          <ion-button expand="block" onclick="toggleSliding()">Toggle sliding</ion-button>
          <ion-button expand="block" onclick="toggleDynamicOptions()">Toggle Dynamic Options</ion-button>
          <ion-button expand="block" onclick="closeOpened()">Close Opened Items</ion-button>
          <ion-button expand="block" onclick="openItem('start')">Open Item Start</ion-button>
          <ion-button expand="block" onclick="openItem('end')">Open Item End</ion-button>
          <ion-button expand="block" onclick="openItemOneSide()">Open Item with only one side</ion-button>
          <ion-button expand="block" onclick="setDynaicItem()">Swap dynamic item</ion-button>
        </div>

        <ion-list id="list">
          <div class="nested-div">
            <ion-item-sliding>
              <ion-item>
                <ion-label>
                  <h2>No Options</h2>
                  <p>Should not error or swipe without options</p>
                </ion-label>
              </ion-item>
            </ion-item-sliding>

            <ion-item-sliding id="item6">
              <ion-item>
                <ion-label> One Line, dynamic option and text </ion-label>
              </ion-item>
              <ion-item-options class="show-options">
                <ion-item-option color="primary">
                  <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                  <span class="more-text"></span>
                </ion-item-option>
                <ion-item-option color="secondary" onclick="archive('item6')">
                  <ion-icon slot="start" name="archive"></ion-icon>
                  <span class="archive-text"></span>
                </ion-item-option>
              </ion-item-options>
            </ion-item-sliding>

            <ion-item-sliding id="item6">
              <ion-item>
                <ion-label> Two options, one dynamic option and text </ion-label>
              </ion-item>
              <ion-item-options side="start">
                <ion-item-option color="primary">
                  <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                </ion-item-option>
              </ion-item-options>
              <ion-item-options side="end" class="show-options">
                <ion-item-option color="primary">
                  <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                  <span class="more-text"></span>
                </ion-item-option>
                <ion-item-option color="secondary" onclick="archive('item6')">
                  <ion-icon slot="start" name="archive"></ion-icon>
                  <span class="archive-text"></span>
                </ion-item-option>
              </ion-item-options>
            </ion-item-sliding>

            <ion-item-sliding id="item100">
              <ion-item href="#">
                <ion-label>
                  <h2>HubStruck Notifications</h2>
                  <p>A new message from a repo in your network</p>
                  <p>Oceanic Next has joined your network</p>
                </ion-label>
                <ion-note slot="end"> 10:45 AM </ion-note>
              </ion-item>

              <ion-item-options side="start">
                <ion-item-option onclick="noclose('item100')"> No close </ion-item-option>
              </ion-item-options>
              <ion-item-options side="end">
                <ion-item-option color="danger" onclick="unread('item100')">
                  <ion-icon slot="icon-only" name="trash"></ion-icon>
                </ion-item-option>
                <ion-item-option onclick="unread('item100')">
                  <ion-icon slot="icon-only" name="star"></ion-icon>
                </ion-item-option>
              </ion-item-options>
            </ion-item-sliding>

            <ion-item-sliding id="item100">
              <ion-item href="#">
                <ion-label>
                  <h2>Disabled Buttons</h2>
                  <p>Buttons should not be clickable</p>
                </ion-label>
              </ion-item>

              <ion-item-options side="start">
                <ion-item-option disabled> Disabled </ion-item-option>
              </ion-item-options>
              <ion-item-options side="end">
                <ion-item-option color="danger" disabled>
                  <ion-icon slot="icon-only" name="trash"></ion-icon>
                </ion-item-option>
                <ion-item-option disabled>
                  <ion-icon slot="icon-only" name="star"></ion-icon>
                </ion-item-option>
              </ion-item-options>
            </ion-item-sliding>

            <ion-item-sliding id="item0">
              <ion-item onclick="clickedItem('item0')">
                <ion-label class="ion-text-wrap">
                  <h2>RIGHT side - no icons</h2>
                  <p>Hey do you want to go to the game tonight?</p>
                </ion-label>
              </ion-item>
              <ion-item-options class="sliding-enabled">
                <ion-item-option color="primary" onclick="archive('item0')">Archive</ion-item-option>
                <ion-item-option color="danger" onclick="del('item0')">Delete</ion-item-option>
              </ion-item-options>
            </ion-item-sliding>

            <ion-item-sliding id="item1">
              <ion-item detail href="#" class="ion-activated">
                <ion-label class="ion-text-wrap">
                  <h2>LEFT side - no icons</h2>
                  <p>I think I figured out how to get more Mountain Dew</p>
                </ion-label>
              </ion-item>
              <ion-item-options side="start" class="sliding-enabled">
                <ion-item-option color="primary" onclick="archive('item1')">Archive</ion-item-option>
                <ion-item-option color="danger" onclick="del('item1')">Delete</ion-item-option>
              </ion-item-options>
            </ion-item-sliding>

            <ion-item-sliding id="item2">
              <ion-item detail>
                <ion-label class="ion-text-wrap">
                  <h2>RIGHT/LEFT side - icons</h2>
                  <p>I think I figured out how to get more Mountain Dew</p>
                </ion-label>
              </ion-item>
              <ion-item-options side="start" class="sliding-enabled">
                <ion-item-option color="secondary" expandable onclick="unread('item2')">
                  <ion-icon slot="start" name="checkmark"></ion-icon>
                  Unread
                </ion-item-option>
              </ion-item-options>

              <ion-item-options side="end" class="sliding-enabled">
                <ion-item-option color="primary" onclick="archive('item2')">
                  <ion-icon slot="start" name="mail"></ion-icon>
                  Archive
                </ion-item-option>
                <ion-item-option color="danger" onclick="del('item2')" expandable>
                  <ion-icon slot="start" name="trash"></ion-icon>
                  Delete
                </ion-item-option>
              </ion-item-options>
            </ion-item-sliding>

            <ion-item-sliding id="item3">
              <ion-item detail>
                <ion-label class="ion-text-wrap">
                  <h2>RIGHT/LEFT side - icons (slot="start")</h2>
                  <p>I think I figured out how to get more Mountain Dew</p>
                </ion-label>
              </ion-item>
              <ion-item-options side="start" icon-start class="sliding-enabled">
                <ion-item-option color="secondary" expandable onclick="unread('item3')">
                  <ion-icon slot="start" name="checkmark"></ion-icon>
                  Unread
                </ion-item-option>
              </ion-item-options>

              <ion-item-options icon-start>
                <ion-item-option color="primary" onclick="archive('item3')">
                  <ion-icon slot="start" name="mail"></ion-icon>
                  Archive
                </ion-item-option>
                <ion-item-option color="danger" onclick="del('item3')" expandable class="sliding-enabled">
                  <ion-icon slot="start" name="trash"></ion-icon>
                  Delete
                </ion-item-option>
              </ion-item-options>
            </ion-item-sliding>

            <ion-item-sliding id="item4">
              <ion-item>
                <ion-icon name="mail" slot="start"></ion-icon>
                <ion-label> One Line w/ Icon, div only text </ion-label>
              </ion-item>
              <ion-item-options icon-start>
                <ion-item-option color="primary" onclick="archive('item4')" expandable class="sliding-enabled">
                  <ion-icon slot="start" name="archive"></ion-icon>
                  Archive
                </ion-item-option>
              </ion-item-options>
            </ion-item-sliding>

            <ion-item-sliding id="item5" class="sliding-enabled">
              <ion-item>
                <ion-avatar slot="start">
                  <img src="" />
                </ion-avatar>
                <ion-label> One Line w/ Avatar, div only text </ion-label>
              </ion-item>
              <ion-item-options>
                <ion-item-option color="primary" expandable>
                  <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                  More
                </ion-item-option>
                <ion-item-option color="secondary" onclick="archive('item5')">
                  <ion-icon slot="start" name="archive"></ion-icon>
                  Archive
                </ion-item-option>
                <ion-item-option color="light" onclick="del('item5')">
                  <ion-icon slot="start" name="trash"></ion-icon>
                  Delete
                </ion-item-option>
              </ion-item-options>
            </ion-item-sliding>

            <ion-item-sliding id="item7">
              <ion-item>
                <ion-label> One Line, dynamic icon-start option </ion-label>
              </ion-item>
              <ion-item-options icon-start>
                <ion-item-option color="primary">
                  <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                  <span class="more-text"></span>
                </ion-item-option>
                <ion-item-option color="secondary" onclick="archive('item7')">
                  <ion-icon slot="start" name="archive"></ion-icon>
                  <span class="archive-text"></span>
                </ion-item-option>
              </ion-item-options>
            </ion-item-sliding>

            <ion-item-sliding id="item8">
              <ion-item>
                <ion-thumbnail slot="start">
                  <img src="" />
                </ion-thumbnail>
                <ion-label>
                  <h2>DOWNLOAD</h2>
                  <p>Paragraph text.</p>
                </ion-label>
              </ion-item>
              <ion-item-options>
                <ion-item-option color="primary" onclick="archive('item8')">
                  <ion-icon name="archive"></ion-icon>Archive
                </ion-item-option>
                <ion-item-option color="secondary" expandable onclick="download('item8')">
                  <ion-icon slot="start" name="download" class="download-hide"></ion-icon>
                  <div class="download-hide">Download</div>

                  <ion-icon slot="start" class="download-spinner" name="refresh"></ion-icon>
                  <div class="download-spinner">Loading...</div>
                </ion-item-option>
              </ion-item-options>
            </ion-item-sliding>

            <ion-item-sliding id="item9">
              <ion-item>
                <ion-thumbnail slot="start">
                  <img src="" />
                </ion-thumbnail>
                <ion-label>
                  <h2>ion-item-sliding without options (no sliding)</h2>
                  <p>Paragraph text.</p>
                </ion-label>
              </ion-item>
            </ion-item-sliding>

            <ion-item-sliding id="item10">
              <ion-item detail>
                <ion-label class="ion-text-wrap">
                  <h2>RIGHT/LEFT side - many buttons</h2>
                  <p>Use mobile emulator to check</p>
                </ion-label>
              </ion-item>
              <ion-item-options side="start" class="sliding-enabled">
                <ion-item-option color="primary" expandable>
                  <ion-icon slot="start" name="checkmark"></ion-icon>
                  Btn 1
                </ion-item-option>
                <ion-item-option color="secondary" expandable>
                  <ion-icon slot="start" name="checkmark"></ion-icon>
                  Btn 2
                </ion-item-option>
                <ion-item-option color="danger" expandable>
                  <ion-icon slot="start" name="checkmark"></ion-icon>
                  Btn 3
                </ion-item-option>
                <ion-item-option color="tertiary" expandable>
                  <ion-icon slot="start" name="checkmark"></ion-icon>
                  Btn 4
                </ion-item-option>
              </ion-item-options>

              <ion-item-options side="end" class="sliding-enabled">
                <ion-item-option color="primary" expandable>
                  <ion-icon slot="start" name="mail"></ion-icon>
                  Btn 5
                </ion-item-option>
                <ion-item-option color="secondary" expandable>
                  <ion-icon slot="start" name="mail"></ion-icon>
                  Btn 6
                </ion-item-option>
                <ion-item-option color="danger" expandable>
                  <ion-icon slot="start" name="mail"></ion-icon>
                  Btn 7
                </ion-item-option>
                <ion-item-option color="tertiary" expandable>
                  <ion-icon slot="start" name="mail"></ion-icon>
                  Btn 8
                </ion-item-option>
              </ion-item-options>
            </ion-item-sliding>

            <ion-item-sliding id="dynamic-item">
              <ion-item>
                <ion-label>Dynamic First Item</ion-label>
              </ion-item>
              <ion-item-options side="end">
                <ion-item-option color="tertiary" expandable> First Item Options </ion-item-option>
              </ion-item-options>
            </ion-item-sliding>

            <ion-item>
              <ion-label class="ion-text-wrap">
                <h2>Normal ion-item (no sliding)</h2>
                <p>Paragraph text.</p>
              </ion-label>
            </ion-item>

            <ion-item onclick="clickedItem('item9')">
              <ion-label class="ion-text-wrap">
                <h2>Normal button (no sliding)</h2>
                <p>Hey do you want to go to the game tonight?</p>
              </ion-label>
            </ion-item>
          </div>
        </ion-list>

        <script>
          const setDynaicItem = () => {
            const sliding = document.querySelector('#dynamic-item');
            sliding.innerHTML = `
            <ion-item>
              <ion-label>Dynamic Second Item</ion-label>
            </ion-item>
            <ion-item-options side="end">
              <ion-item-option color="tertiary" expandable>
                Second Item Options
              </ion-item-option>
            </ion-item-options>
          `;
          };

          var dynamicSlidingEnabled = document.getElementsByClassName('sliding-enabled');

          // Toggle the dynamic options
          var dynamicShowOptions = document.getElementsByClassName('show-options');
          toggleDynamicOptions();

          function toggleDynamicOptions() {
            // TODO the element needs to be removed / added to the DOM
          }

          // Change the text for the more and archive buttons
          var dynamicText = true;
          var moreTextSpans = document.getElementsByClassName('more-text');
          var archiveTextSpans = document.getElementsByClassName('archive-text');
          changeDynamicText();

          function changeDynamicText() {
            dynamicText = !dynamicText;

            for (var i = 0; i < moreTextSpans.length; i++) {
              var moreText = dynamicText ? 'Changed More' : 'Dynamic More';
              moreTextSpans[i].innerHTML = moreText;
            }

            for (var i = 0; i < archiveTextSpans.length; i++) {
              var archiveText = dynamicText ? 'Changed Archive' : 'Dynamic Archive';
              archiveTextSpans[i].innerHTML = archiveText;
            }
          }

          function toggleSliding() {
            // this.slidingEnabled = !this.slidingEnabled;
          }

          function closeOpened() {
            var list = document.getElementById('list');
            list.closeSlidingItems();
          }

          function openItem(side) {
            var item = document.getElementById('item2');
            item.open(side);
          }

          function openItemOneSide() {
            var item = document.getElementById('item1');
            item.open();
          }

          function noclose(item) {
            var itemEle = document.getElementById(item);
            console.log('no close', itemEle);
          }

          function unread(item) {
            closeSlidingItem('UNREAD', item);
          }

          function archive(item) {
            closeSlidingItem('ARCHIVE', item);
          }

          function del(item) {
            closeSlidingItem('DELETE', item);
          }

          function download(item) {
            var itemEle = document.getElementById(item);
            console.log(itemEle);
            itemEle.classList.add('downloading');
            setTimeout(() => {
              alert('Item was downloaded!');

              itemEle.classList.remove('downloading');
              itemEle.close();
            }, 1500);
          }

          function closeSlidingItem(option, item) {
            var itemEle = document.getElementById(item);

            // TODO open alert instead
            if (itemEle) {
              itemEle.close();
            }
            console.log(option, itemEle);
          }

          function clickedItem(item) {
            var itemEle = document.getElementById(item);
            console.log('Clicked, ion-item', itemEle);
          }

          function reload() {
            window.location.reload();
          }
          document.addEventListener('ionSwipe', (ev) => console.log('SWIPE!!', ev.detail));
          document.addEventListener('ionDrag', (ev) => {
            // console.log('DRAG!!', ev.detail);

            let slidingRatio = ev.target.getSlidingRatio();
            console.log('sliding', slidingRatio);

            if (slidingRatio > 0) {
              // positive
              console.log('right side');
            } else {
              // negative
              console.log('left side');
            }
            if (Math.abs(slidingRatio) > 1) {
              console.log('overscroll');
            }
          });
        </script>
        <style>
          .download-spinner {
            display: none;
          }

          svg circle {
            stroke: white;
          }

          .downloading .download-spinner {
            display: block;
          }

          .downloading .download-hide {
            display: none;
          }
        </style>
      </ion-content>
    </ion-app>
  </body>
</html>
